<template>
  <div>
    <div id="container" style="width: 100%; height: 230px;border:1px solid black"></div>
    <el-table :data="cinemas">
      <el-table-column prop="cinema_name" label="影院名称" width="200"> </el-table-column>
      <el-table-column prop="address" label="影院地址" width="280"> </el-table-column>
      <el-table-column prop="district" label="影院位置" width="100"> 
        <template slot-scope="scope">
          {{scope.row.city}}  {{scope.row.district}}
        </template>
      </el-table-column>
      <el-table-column width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-s-opportunity" 
          @click="loc(scope.row)" 
          circle size="small"></el-button>
        <el-button type="success" icon="el-icon-check" circle size="small"></el-button>
        <el-button type="warning" icon="el-icon-s-grid" @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"
        circle size="small"></el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delItem(scope.row.id)"
        circle size="small"></el-button>
        </template>       
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      cinemas: [],
    };
  },
  // 组件挂载完毕后自动调用生命周期方法
  mounted() {
    console.log("mounted");
    this.loadList()
     window._AMapSecurityConfig ={
                securityJsCode:'ac4fda467eda97f40d6276c49642b190'
            }
            AMapLoader.load({  //首次调用必须写
                "key": "bf605d4ab046bff2a20e176225de87cb",             
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ['AMap.Geocoder'],     // 需要使用的的插件列表
            }).then((AMap)=>{
                this.map = new AMap.Map('container');
                this.map.setCenter([116.403016,39.93729])
                this.map.setZoom(13)
                this.map.on('click',(e)=>{
                   let {lng,lat}=e.lnglat;
                   console.log({lng,lat});
               
                })
            }).catch(e => {
                console.log(e);
            })
  },
  methods: {
    loadList(){
      this.$http.cinemaApi.list().then((res) => {
      console.log(res);
      this.cinemas = res.data.data;
    });
    },
    // 删除功能
    delItem(id) {
      console.log('待删除影院'+id);
      this.$confirm('该操作将删除影院,是否继续','提示',{type:'warning'}).then(res=>{
        this.$http.cinemaApi.delete({id}).then(res=>{
          this.$message({type:'success',message:'删除成功'})
          this.loadList()
        })
      })
    },
    loc(cinema) {
      console.log(cinema);
      let {longitude,latitude}=cinema
      this.map.setCenter([longitude,latitude])
      this.map.setZoom(13)
      // 显示标记

    },
  },
};
</script>

<style lang="scss" scoped>
</style>